<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta charset="UTF-8">
	<title></title>
	<link href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css" rel="stylesheet">
	<link rel="stylesheet" href="http://1.xinli2017.applinzi.com/login/iconfont/iconfont.css">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
	<style type="text/css">
		body{
			background:#23a4ed;
			color: #fff;
			font-size: 26px;

		}
		.success{
			height: 500px;
			width: 100%;
			position: relative;

		}
		.success_y {
			height: 100px;
			width: 100px;
			background: #fff;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
		}
		.success_y span{
			font-size: 40px;
			font-weight: bold;
			color: #23a4ed;
			line-height: 100px;

		}
		.title{
			height: 40px;
			text-align: center;
			width: 100%;
			position: absolute;
			top: 71%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.error{
			height: 500px;
			width: 100%;
			position: relative;

		}
		.error_x {
			height: 100px;
			width: 100px;
			background: #fff;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
		}
		.error_x span{
			font-size: 40px;
			font-weight: bold;
			color: #23a4ed;
			line-height: 100px;

		}
		.pay_resp_desc{
			margin-top: 1rem;
		}
	</style>
</head>
<body>
<script type="text/javascript">
	/*
 * @Author: fangzhi 
 * @Date: 2018-04-20 10:37:38 
 * @Last Modified by: fangzhi
 * @Last Modified time: 2018-05-21 17:54:07
 */

 /**
 * 初始化jsbridge
 * @param readyCallback 初始化完成后的回调
 */
function initJsBridge(readyCallback) {
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // 注册jsbridge
    function connectWebViewJavascriptBridge(callback) {
        if (isAndroid) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function () {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
            return;
        }
        if (isiOS) {
            if (window.WebViewJavascriptBridge) {
                return callback(WebViewJavascriptBridge);
            }
            if (window.WVJBCallbacks) {
                return window.WVJBCallbacks.push(callback);
            }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'https://__bridge_loaded__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function () {
                document.documentElement.removeChild(WVJBIframe)
            }, 0)
        }
    }
    // 调用注册方法
    connectWebViewJavascriptBridge(function (bridge) {
        if (isAndroid) {
            bridge.init(function (message, responseCallback) {
                console.log('JS got a message', message);
                responseCallback(data);
            });
        }
         
        // 只有在这里注册过的方法，在原声代码里才能用callHandler的方式调用
        bridge.registerHandler('backClick', function (data, responseCallback) {
            showResponse(data);
        });
        if(readyCallback){
            readyCallback();
        }
         
    });
}

initJsBridge(()=>{
    console.log("注册js交互事件成功！");
});

$('.title').click(function(){
	// IOS和android采用了不同的JS交互方式 这里区分
       var u = navigator.userAgent;
       var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
       if(!isAndroid){
         window.WebViewJavascriptBridge.callHandler('backClick', null, function (response) {
            showResponse(response);
        })
       }else{
         window.android.invokeMethod(1,[true]);
       }
})
</script>
<input type="hidden" name="pay_result" id="pay_result" th:value="${pay_result}" >
<input type="hidden" name="pay_result" id="bind_result" th:value="${bind_result}" >
<input type="hidden" name="resp_desc" id="resp_desc" th:value="${resp_desc}" >
	<div class="success" id="success_pay_ml" style="display: none">

		<div class="success_y">
			<span class="iconfont icon-dui"></span>
		</div>
		<div class="title" >
			收款成功
		</div>
	</div>

	<div class="processing" id="error_pay_ml" style="display: none">
        <div class="processing-w">
            <span class="iconfont icon-cuo"></span>
        </div>
		<div class="title" >
			<div class="pay_resp_desc"></div>
		</div>
	</div>
	<div class="success" id="success_bind_ml" style="display: none">

		<div class="success_y">
			<span class="iconfont icon-dui"></span>
		</div>
		<div class="title" >
			绑定成功
		</div>
	</div>

	<div class="processing" id="error_bind_ml" style="display: none">
        <div class="processing-w">
            <span class="iconfont icon-cuo"></span>
        </div>
		<div class="title" >
			<div class="bind_resp_desc"></div>
		</div>
	</div>
	<div id="processing" style="display: none;">
		<div class="title" >
			详情可查看您个人中心账单.
		</div>
	</div>
	<div id="request_error_sys">
		<div class="title" >
			null
		</div>
	</div>
<script type="text/javascript">
    $(function () {
        var pay_result = $("#pay_result").val();
        var bind_result = $("#bind_result").val();
        var resp_desc = $("#resp_desc").val();

        $("#processing").hide();
        if (pay_result == "success") {
            $("#success_pay_ml").show();
            $("#error_pay_ml").hide();
            $("#request_error_sys").hide();
        }else if (pay_result == "error") {
            $("#success_pay_ml").hide();
            $("#error_pay_ml").show();
            $(".pay_resp_desc").text(resp_desc);
            $("#request_error_sys").hide();
        }else if (bind_result == "success") {
        	$("#success_bind_ml").show();
        	$("#error_bind_ml").hide();
            $("#error_pay_ml").hide();
            $("#request_error_sys").hide();
        }else if (bind_result == "error") {
            $("#success_pay_ml").hide();
            $("#success_bind_ml").hide();
            $("#error_bind_ml").show();
            $(".bind_resp_desc").text(resp_desc);
            $("#request_error_sys").hide();
        }else{
            if (pay_result && resp_desc) {
                $("#processing").show();
                $("#request_error_sys").hide();
                $("#success_pay_ml").hide();
                $("#error_pay_ml").hide();
            }else {
                $("#success_pay_ml").hide();
                $("#error_pay_ml").hide();
                $("#processing").hide();
            }
        }
    });
</script>
</body>
</html>
